<template>
  <view class="com-a">
    <view class="com-header">
      <text class="com-name">子组件A</text>
      <text class="com-desc">接收父组件值 → 传递给子组件B</text>
    </view>

    <!-- 父组件值展示区 -->
    <view class="data-display">
      <text class="data-label">父组件传递的值：</text>
      <text class="data-value">{{ parentData || '（等待接收值...）' }}</text>
    </view>

    <!-- 传值按钮 -->
    <button 
      class="transfer-btn"
      @click="sendToBrother"
      :disabled="!parentData"
    >
      传递给子组件B
    </button>
  </view>
</template>

<script>
export default {
  props: {
    parentData: {
      type: String,
      default: ''
    }
  },
  methods: {
    sendToBrother() {
      uni.$emit('a-to-b-event', this.parentData)
      uni.showToast({ title: '已传递给子组件B', icon: 'none', duration: 1500 })
    }
  }
}
</script>

<style scoped>
.com-a {
  background-color: #ffffff;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  border-left: 8rpx solid #42b983; /* 子组件A主题色 */
  padding: 30rpx;
}

.com-header {
  margin-bottom: 28rpx;
}

.com-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #42b983;
  display: block;
  margin-bottom: 8rpx;
}

.com-desc {
  font-size: 24rpx;
  color: #7f8c8d;
}

.data-display {
  padding: 20rpx;
  background-color: #f8fdf6;
  border-radius: 8rpx;
  margin-bottom: 24rpx;
}

.data-label {
  font-size: 26rpx;
  color: #666;
}

.data-value {
  font-size: 28rpx;
  color: #27ae60;
  font-weight: 500;
  word-break: break-all;
}

.transfer-btn {
  width: 100%;
  height: 72rpx;
  line-height: 72rpx;
  background-color: #42b983;
  color: #ffffff;
  font-size: 28rpx;
  border-radius: 8rpx;
  border: none;
  transition: all 0.2s ease;
}

.transfer-btn:active {
  background-color: #359669;
  transform: translateY(2rpx);
}

.transfer-btn:disabled {
  background-color: #c8e6c9;
  color: #ffffff;
  cursor: not-allowed;
}
</style>